<template>
    <div class="interest">
        <!-- 到期时间 -->
        <div class="maturityTime">
            <div class="maturityTime_top">
                <div class="maturityTime_top_left"></div>
                <div class="maturityTime_top_t">当前权益卡有效期限还剩</div>
                <div class="maturityTime_top_right"></div>
            </div>
            <div class="maturityTime_bottom">
                <div class="maturityTime_bottom_bg">
                    <div class="maturityTime_bottom_bg_num">{{yearNum}}</div>
                    <div class="maturityTime_bottom_bg_year">年</div>
                </div>
                <div class="maturityTime_bottom_bg">
                    <div class="maturityTime_bottom_bg_num">{{dayNum}}</div>
                    <div class="maturityTime_bottom_bg_year">天</div>
                </div>
            </div>
        </div>
        <!-- 待领取列表 -->
        <div class="receive">
            <div class="title">
                <div class="title_bg"></div>
                <div class="title_t">待使用权益</div>
            </div>
            <div class="list">
                <div
                    class="details"
                    v-for="(item, index) in noReceiveList"
                    :key="index"
                    @click="to_cardDetail(item,item.id,item.workOrderType)"
                >
                    <div style="width: 100%; height: 5rem; position: absolute">
                        <img
                            style="width: 100%; height: 5rem"
                            src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/13bb012ebbbb4856949b6afe56a5d3b4.png"
                            alt=""
                            onclick="return false"
                        />
                    </div>

                    <img
						class="details_img"
						:src="item.pictureUrl"
						alt=""
					/>
                    <div class="details_t no_details_t">{{ item.name }}</div>
                    <van-icon name="arrow" size="20" color="#fff" bold />
                </div>
            </div>
            <div class="no_list" v-if="!noReceiveList.length">
                <img
                    class="no_list_img"
                    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/c19899b901d44af4a8de02e69bdbd526.png"
                    alt=""
                />
                <div>全部权益已使用</div>
            </div>
        </div>
        <!-- 已领取列表 -->
        <div class="received">
            <div class="title">
                <div class="title_bg"></div>
                <div class="title_t">已使用权益</div>
            </div>
            <div class="list">
                <div
                    class="details"
                    v-for="(item, index) in receiveList"
                    :key="index"
                    @click="to_reportQuery(item,item.id,item.workOrderType)"
                >
                    <div style="width: 100%; height: 5rem; position: absolute">
                        <img
                            style="width: 100%; height: 5rem"
                            src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/34d2ff80267b4811b9339470d7afb81f.png"
                            alt=""
                            onclick="return false"
                        />
                    </div>

                    <img
						class="details_img"
						:src="item.pictureUrl"
						alt=""
					/>
                    <div class="details_t">{{ item.name }}</div>
                    <van-icon name="arrow" size="20" color="#fff" bold />
                </div>
            </div>
            <div class="no_listed" v-if="!receiveList.length">
                <img
                    class="no_list_img"
                    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/0a7dac16a5734e269148fe7a749b0243.png"
                    alt=""
                />
                <div>尚未使用权益</div>
            </div>
        </div>
        <div class="btn" @click="userInterest">权益详细说明></div>
        <div class="phoneLine">客服热线：400-8596598</div>
       <u-popup :show="show" mode="center" :round="10" @close="close">
            <div class="results_content">
                <img class="results_img" src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/23/05d6532957c247c8a2193a678cef1a91.png" alt="" />
                <div class="results_tt">您的上一个问题正在处理中,请稍等！</div>
                <div class="results_t">问题内容：{{describe}}</div>
                <div class="card_illustrate_phone">
                    <u-icon name="phone" size="20" color="#666"/>
                    <div>4008-596-598</div>
                </div>
            </div>
        </u-popup>
    </div>
</template>

<script>
import {
		baseUrl
	} from "@/config/tendIdConfig.js";
export default {
    name: "myInterest",
    data() {
        return {
            receiveList: [],
            noReceiveList: [],
            describe:'',
            show: false,
            nowTime:'',
			yearNum:'',
			dayNum:'',
        };
    },
	onLoad(options) {
		this.cardNum = options.cardNum;
		this.cardType = options.cardType;
		this.maturityTime =options.maturityTime;
		this.getInterest(this.cardNum);
		this.restTime()
	},
    methods: {
        restTime(){
            this.nowTime = new Date();
            this.days = this.$moment(this.maturityTime).diff(this.$moment(this.nowTime),'day')
            this.dayNum = this.days % 365; //3
            this.yearNum = (this.days - this.dayNum)/365
        },
        toShifeng() {
            //跳转页面覆盖当前页面
            setTimeout(() => {
                location.href = 'http://app.oneredhealth.com/#/pages/report/index' +'?random='+Math.random();
            }, 300);
          return false
        },
        getInterest(cardNum) {
			const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
			const that = this;
			uni.request({
			   url: baseUrl + '/customer/equityInfoH5/web/web/equityCardQueryInfo',
			    method: "POST",
				header: {
					Authorization: token
				},
			    data: {
					cardNum: cardNum,
			    },
			    success(res) {
			        that.receiveList = res.data.data.receivedEquityInfoList;
			        that.noReceiveList = res.data.data.noReceivedEquityInfoList;
			    },
			});
        },
        //去详情页面
        to_cardDetail(item,id,workOrderType) {
			//0:不可提交 1：问题咨询  2：上传病例 3：上传报销 4：云档案 5:填写回寄
			console.log(workOrderType,'workOrderType>>>>>>')
			const infos = JSON.stringify(item);
            if (workOrderType == '1') {
                this.detail(id)
            }else if (workOrderType == '4'){
                //创建云档案 跳转十蜂
                this.toShifeng()
            } 
			// else if (workOrderType == '0' ) {
   //              return;
   //          } 
			else {
				this.$u.route({
					url: "/pages_card/cardDetail/index",
					params: {
						infos,
						cardNum: this.cardNum,
						equityInfoId: id,
						workOrderType : workOrderType,
						usedType:1,
						cardType : this.cardType
					}
				})
            }
        },
        detail(id){
			const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
			const that = this;
			uni.request({
			   url: baseUrl + '/customer/equityWorkOrderH5/web/selectEquityWorkOrder',
			    method: "POST",
				header: {
					Authorization: token
				},
			    data: {
					equityInfoId:id,
					cardNum:that.cardNum
			    },
			    success(res) {
			        if(res.data.data == null){
			        	that.$u.route({
			        		url: "/pages_card/userIndex/index",
			        		params: {
			        			cardNum: that.cardNum,
			        			equityInfoId: id,
			        		}
			        	})
			        }else{
			            var workInfo = JSON.parse(res.data.data.workInfo); 
			            that.describe = workInfo.describe
			            that.show = true
			        }
			    },
			});
        },
		close(){
			this.show = false;
		},
        //去进度页面
        to_reportQuery(item,id,workOrderType) {
			//0:不可提交 1：问题咨询  2：上传病例 3：上传报销 4：云档案
			const infos = JSON.stringify(item);
            if (workOrderType == '0') {
                return;
            }else if(workOrderType == '4'){
                //创建云档案 跳转十蜂
                this.toShifeng()
            } else {
				this.$u.route({
					url: "/pages_card/cardDetail/index",
					params: {
						infos,
						cardNum: this.cardNum,
						equityInfoId: id,
						workOrderType : workOrderType,
						usedType:2,
						cardType : this.cardType
					}
				})
            }
        },
        //用户协议
        userInterest(){
			this.$u.route({
				url: "/pages_card/userInterest/index",
				params: {
					cardType : this.cardType
				}
			})
        },
    },
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}
.interest {
    width: 100%;
    height: 100%;
    background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/19/eae21b0780554e87958d1682d1c38872.png);
    background-repeat: no-repeat;
    background-size: 100% 276px;
    box-sizing: border-box;
    color: #3d3d3d;
    text-align: center;
}
.maturityTime{
    padding-top: 1.25rem;
    color: #FFFFFF;
}
.maturityTime_top{
    display: flex;
    justify-content: center;
    align-items: center;
}
.maturityTime_top_left{
    width: 1.4375rem;
    height: 0.0625rem;
    background: linear-gradient(270deg, #FFF5D4 0%, rgba(216,216,216,0) 100%);
}
.maturityTime_top_t{
    font-size: 1rem;
    color: #FFF5D4;
    margin: 0 0.25rem;
}
.maturityTime_top_right{
    width: 1.4375rem;
    height: 0.0625rem;  
    background: linear-gradient(90deg, #FFF5D4 0%, rgba(216,216,216,0) 100%);
}
.maturityTime_bottom{
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.maturityTime_bottom_bg{
    width: 6rem;
    height: 6rem;
    background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/0e604d460a854562b55c397deea5fde1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    /* line-height: 6rem; */
}
.maturityTime_bottom_bg_num{
    margin-top: 1.2rem;
    font-size: 28px;
}
.maturityTime_bottom_bg_year{
    font-size: 14px;            
    color: #FFE8A4;
}

.receive {
    padding: 0.625rem 1rem 0;
}
.received {
    padding: 0.3125rem 1rem 0;
}
.title {
    display: flex;
    align-items: center;
}
.title_bg {
    width: 0.25rem;
    height: 1.125rem;
    background: #ff8a00;
    border-radius: 1.125rem;
}
.title_t {
    height: 1.125rem;
    margin-left: 0.5rem;
    font-size: 1.125rem;
    font-weight: blod;
    color: #333333;
    margin-top: -0.3125rem;
}
.list {
    padding: 0.875rem 0.5625rem 0rem;
}
.details {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5rem;
    background: linear-gradient(90deg, #fef4e8 0%, #ffeedd 50%, #fde8d1 100%);
    border-radius: 0.625rem;
    margin-bottom: 0.875rem;
}
.details_img {
    z-index: 2;
    width: 4.25rem;
    height: 4.25rem;
    /* margin-left: 1.125rem; */
}
.details_t {
    width: 200px;
    z-index: 2;
    font-size: 1rem;
    font-weight: bold;
    color: #77370f;
    margin: 0 .625rem;
}
.no_details_t {
    color: #7294e1;
}
.btn {
    margin-right: 2.0625rem;
    text-align: right;
    font-size: 0.875rem;
    font-weight: bold;
    color: #ecaf65;
}
.phoneLine {
    padding: 1.4375rem 0rem 2.5rem;
    display: flex;
    justify-content: center;
    font-size: 1.125rem;
    /* font-weight: bold; */
    color: #ecaf65;
}
.no_list {
    margin: 0.75rem auto;
    font-size: 0.75rem;
    font-weight: bold;
    color: #ff8a00;
}
.no_listed {
    margin: 0.75rem auto;
    font-size: 0.75rem;
    font-weight: bold;
    color: #999999;
}
.no_list_img {
    width: 10.625rem;
    height: 4.375rem;
}


.results_content {
    width: 680rpx;
    height: 100%;
    padding:1.25rem;
    text-align: center;
}
.results_img {
    width: 4.75rem;
    height: 4.75rem;
}
.results_tt{
    margin-top: 1.75rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #ff8a00;
}
.results_t {
    margin-top: 1.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #3d3d3d;
}
.card_illustrate_phone{
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
    font-weight: 500;
    color: #666;
}
</style>
